Ext.require([
    'Ext.form.*',
    'Ext.window.MessageBox',
    'Ext.tip.*'
]);

Ext.onReady(function() {

    var formPanel = Ext.create('Ext.form.Panel', {
        frame: true,
        title: 'Forma za unos/izmjenu vozaca',
		height:500,
        width: 300,
        bodyPadding: '10 10 0',
        url: 'handlerforme.php',

        fieldDefaults: {
            labelAlign: 'left',
            labelWidth: 90,
            anchor: '100%'
        },

        items: [{
            xtype: 'image',
			draggable: true,
			height: 125,
			width: 151,
			id: 'logo_sveucilista',
			src: 'http://i.imgur.com/qRRc1.jpg'
        }, {
            xtype: 'numberfield',  // 0 za unos novog vozaca, unijeti neki broj za izmjenu postojeceg. Trebalo bi pogledati kako implementirati tooltip
            name: 'id',
            fieldLabel: 'Vozac_ID',
            value: 0,
            minValue: 0,
            maxValue: 4294967295 // 32-bit unsigned integer. Mozda bi trebalo naci neko alternativno rijesenje.
        }, {
            xtype: 'textfield',
            name: 'Ime',
            fieldLabel: 'Ime',
			allowBlank: false,
			blankText: 'Ovo polje morate unijeti',
			emptyText: 'Unesite ime vozaca'
        }, {
            xtype: 'textfield',
            name: 'Prezime',
            fieldLabel: 'Prezime',
			allowBlank: false,
			blankText: 'Ovo polje morate unijeti',
			emptyText: 'Unesite prezime vozaca'
        },{
            xtype: 'textfield',
            name: 'Mobitel',
            fieldLabel: 'Mobitel'
        }, {
            xtype: 'textfield',
            name: 'Mail',
            fieldLabel: 'E-mail'
        }, {
            xtype: 'textfield',
            name: 'Biljeske',
            fieldLabel: 'Biljeske'
        }, {
            xtype: 'radiofield',
            name: 'radio1',
            inputValue: 'M',
            fieldLabel: 'Spol',
            boxLabel: 'Musko',
			checked: true
        }, {
            xtype: 'radiofield',
            name: 'radio1',
            inputValue: 'Z',
            fieldLabel: '',
            labelSeparator: '',
            hideEmptyLabel: false,
            boxLabel: 'Zensko'
        },  {
            xtype: 'radiofield',
            name: 'radio2',
            inputValue: 'A',
            fieldLabel: 'Status',
            boxLabel: 'Aktivan',
			checked: true
        }, {
            xtype: 'radiofield',
            name: 'radio2',
            inputValue: 'N',
            fieldLabel: '',
            labelSeparator: '',
            hideEmptyLabel: false,
            boxLabel: 'Neaktivan',
        },{
            xtype: 'filefield',
            id: 'form-file',
            fieldLabel: 'Slika',
            name: 'photo-path',
			buttonText: 'Izaberite sliku'
        } ],
        buttons: [{
            text: 'Spremi',
            handler: function(){
               if(formPanel.getForm().isValid()){                   
                   var postanevrijednosti = formPanel.getForm().getValues(true).replace(/&/g,',');
                   
                    // MessageBox sa vrijednostima svih submit-anih elemenata
                    Ext.MessageBox.show({
                       title: 'POST-ane vrijednosti',
                       msg: 'Na server ce biti poslane sljedece vrijednosti: <br />' + postanevrijednosti,
                       width:800,
                       buttons: Ext.MessageBox.OK,
                       // handler za OK dugme
                       fn: function (btn, text){
                          // pozivom ove fje se obavlja sva magija. 'url' parametar je PHP skripta koju pozivamo, treci i cetvrti parametar 
                          // su funkcije handleri za uspjeh/neuspjeh. Pogledati za detalje sluzbenu dokumentaciju:
                          // http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.action.Submit
                          formPanel.getForm().submit({
                            // submit-aj sadrzaj cijele forme i hendlaj povratne JSON vrijednosti
                            waitMsg:'Pricekajte...',
                            url: 'handlerforme.php',
                        		success: function(form, action) {
                        	       Ext.Msg.alert('Uspjeh!', action.result.msg);
                        	    },
                      	    failure: function(form, action) {
                      	        switch (action.failureType) {
                      	            case Ext.form.Action.CLIENT_INVALID:
                      	                Ext.Msg.alert('Neuspjeh', 'Vrijednosti polja forme nisu ispravne!');
                      	                break;
                      	            case Ext.form.Action.CONNECT_FAILURE:
                      	                Ext.Msg.alert('Neuspjeh', 'Greska u komunikaciji AJAX-om!');
                      	                break;
                      	            case Ext.form.Action.SERVER_INVALID:
                      	               Ext.Msg.alert('Neuspjeh', action.result.msg);
                      	       }
                      	    }
                        	});                        
                       }
                   });	
                }
            }
        },{
            text: 'Resetiraj',
            handler: function(){
                formPanel.getForm().reset();
            }
        }]        
    });

    formPanel.render('formaVozaci');

});

